<template>
  <div class="zhiboxiaoshou_shangpin">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/" style="margin-top: 20px;">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>销售页商品管理</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="tabs_container">
            <div @click="switchTab('first')" class="tabs_line_son" :class="activeName === 'first' ? 't_tab_title_lei' : ''">全部商品
               <div
                :class="{ t_under_line_lei:activeName === 'first'}"
              ></div>
            </div>
            <div @click="switchTab('second')"  class="tabs_line_son" :class="activeName === 'second' ? 't_tab_title_lei' : ''">分类管理
              <div
                :class="{ t_under_line_lei:activeName === 'second'}"
              ></div>
            </div>
          </div>
          <div style="margin-top: 30px;background:#F8F9FD;height: 100%;overflow:hidden;border-top-left-radius: 30px;">
            <div v-show ="activeName === 'first'">
              <div>
                <div class="flex add_ware" style="margin: 30px 20px 0 0;">

                  <!-- <el-button type="danger" size="medium" @click="tianjia2()">添加多商品</el-button> -->
                  <div
                  class ="up_and_down"
                  style="margin-left: 20px;"
                >
                  <div @click="getlist2(0)" :class="all.on_sale === 0 ? 'tabsClick' : 'tabsNoClick'" style="width:100px;height:40px;text-align:center;line-height:40px">上架中</div>
                  <div @click="getlist2(-100)" :class="all.on_sale === -100 ? 'tabsClick' : 'tabsNoClick'" style="width:100px;height:40px;text-align:center;line-height:40px">已下架</div>
                </div>
                  <div>
                    <el-button @click="kuaisuguanliankai()" type="normal" style="margin-right:20px; border-radius: 12px;">快速关联商品</el-button>
                    <el-button @click="tianjia()">添加商品</el-button>
                  </div>
                </div>

                <div class="zhiboxitong_table">
                  <el-table :data="list" border style="width: 100%" align="center" :header-cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
            :cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"  @cell-mouse-enter="handleMouseEnter"
                    @cell-mouse-leave="handleMouseLeave">
                    <el-table-column prop="id" label="ID" align="left"></el-table-column>
                    <el-table-column prop="sale_name" label="商品名称" align="left"></el-table-column>
                    <el-table-column prop="pv" label="PV" align="left"></el-table-column>
                    <el-table-column prop="uv" label="UV" align="left"></el-table-column>

                    <el-table-column prop="saled" label="今日销售" align="left"></el-table-column>
                    <el-table-column prop="cat_names" label="分类" align="left">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.cat_id" multiple collapse-tags clearable placeholder="分类" @change="changefenlei(scope.row)">
                          <el-option v-for="item in fenleilist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>

                    <el-table-column prop="is_model" label="关联商品" align="left">
                      <template slot-scope="scope">
                        <div  v-if="scope.row.is_model == 0">否</div>
                        <div  v-if="scope.row.is_model == 1">是</div>
                      </template>
                    </el-table-column>

                    <el-table-column v-if="all.on_sale === 0" prop="order" label="排序" align="left">
                      <template slot-scope="scope">
                        <div  >{{ scope.row.order }}<i @click="changeorder(scope.row)"
                          style="cursor: pointer;margin-left: 10px;" class="el-icon-edit"></i></div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220px" align="left">
                      <template slot-scope="scope">
                          <!-- <el-button
                          style="color:#335DFF;font-size:14px"
                          size="mini"
                          type="text"
                          @click="bianji(scope.row.id,'duo')"
                          v-if="scope.row.page_id == 0"
                        >编辑</el-button>
                        <el-button
                        style="color:#335DFF;font-size:14px"
                          size="mini"
                          type="text"
                          @click="bianji(scope.row.id)"
                          v-if="scope.row.page_id != 0"
                        >编辑</el-button> -->
                        <div class="handle_btn">
                        <el-button
                        style="color:#335DFF;font-size:14px"
                          size="mini"
                          type="text"
                          @click="bianji(scope.row)"
                        >编辑</el-button>
                        <el-button size="mini" type="text" @click="shanchu(scope.row.id)" style="color:#335DFF;font-size:14px">删除</el-button>

                        <el-button
                        style="color:#335DFF;font-size:14px"
                          size="mini"
                          type="text"
                          v-if="scope.row.on_sale == 0"
                          @click="shangxiajia(scope.row,-100)"
                        >下架</el-button>
                        <el-button
                        style="color:#335DFF;font-size:14px"
                          size="mini"
                          type="text"
                          v-if="scope.row.on_sale == -100"
                          @click="shangxiajia(scope.row,0)"
                        >上架</el-button>
                        <img
                            src="../../static/img/up.png"
                            class="img_up"
                            v-if="hoveredIndex === scope.$index && scope.$index !== 0"
                            @click="moveUp(scope.row.id,index)"
                          />
                        <img
                            src="../../static/img/down.png"
                            class="img_down"
                            v-if="hoveredIndex === scope.$index && scope.$index !== list.length - 1"
                            @click="moveDown(scope.row.id,index)"
                          />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right; padding: 10px 0;">
                    <el-pagination
                      background
                      layout="total,prev, pager, next"
                      :current-page="all.page"
                      @current-change="fanye"
                      :page-size="all.page_size"
                      :total="total"
                    ></el-pagination>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="activeName === 'second'">
              <fenleiguanli @getfenleilist="getfenleilist" :hide="true" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="根据已有直播页发布页面"
      :visible.sync="log"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="700px"
    >
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
          <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius:12px;">取消</el-button>
        <el-button @click="tongbugo" style="border-radius:12px;background:#335DFF;border:none">确认</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="快速关联商品"
      :visible.sync="kuaisulog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="880px"
    >
    <template slot="title">
      <div class="flexc">
        <div style="font-size: 24px; margin-right: 20px;">快速关联商品</div>
        <div style="font-size: 14px; color: rgb(127, 127, 128);">此处列出了您之前已经编辑过的商品，可快速添加无需重复编辑</div>
      </div>

    </template>
    <div style="background: rgb(255, 251, 230); padding: 10px; margin-bottom: 20px;">
      <i class="el-icon-warning" style="margin-right: 10px; font-size: 20px;"></i> 注：使用该方式关联的商品在原商品被编辑修改后，所有关联它的商城页将同时变化
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <el-input v-model="search.title" style="width: 250px; margin-right: 20px;" placeholder="请输入商品名称"></el-input>
      <el-input v-model="search.fetch_code" style="width: 250px; margin-right: 20px;" placeholder="请输入商品编码"></el-input>
      <el-button @click="sousuo" style="border-radius:12px;background:#335DFF;border:none">搜索</el-button>
    </div>
    <div class="flexc" v-for="item in list2" :key="item.id" style="margin-bottom: 20px;">
      <div style="margin-right: 20px;"><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 68px; height: 68px; border-radius: 10px;"></div>
      <div style="width: 370px;" class="flexc">
        <div style="">
          <div class="flexc" style="margin-bottom: 10px;">
            <div style="font-weight: bold; flex-grow: 1; margin-right: 20px;">{{item.sale_name}}</div>
            <div v-if="item.take_number == 1" style=" background: rgb(220, 242, 228); padding: 6px 15px; width: 90px; border-radius: 30px; color: rgb(79, 190, 123);">支持选号</div>
          </div>

          <div>编码：{{item.fetch_code}}</div>
        </div>
      </div>
      <div style="width: 280px;" class="flexc">
        添加时间：{{item.created_at}}
      </div>
      <div class="flexcc">
        <el-button @click="xuanzhong(item)" style="border-radius:12px; background:#fff; border:2px rgb(247, 44, 106) solid; color: rgb(247, 44, 106);">选择商品</el-button>
      </div>
    </div>


 <!--     <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius:12px;">取消</el-button>
        <el-button @click="tongbugo" style="border-radius:12px;background:#335DFF;border:none">确认</el-button>
      </span> -->
    </el-dialog>
    <!-- 修改排序 -->
    <el-dialog
      :close-on-click-modal="false"
      title="修改排序"
      :visible.sync="isshowchangeorder"
      width="400px">
      <el-input v-model="noworder" type="number" placeholder="请输入排序"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="isshowchangeorder = false">取 消</el-button>
        <el-button size="small" type="primary" @click="surechange">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import * as qiniu from "qiniu-js";
import axios from "axios";
import top from "./components/top.vue";
import left from "./components/left.vue";
import fenleiguanli from "./fenleiguanli.vue";
export default {
  components: {
    top,
    left,
    fenleiguanli
  },
  name: "zhiboxiaoshou_shangpin",
  data() {
    return {
      list: [],
      tongbuall: "",
      log: false,
      activeName: "first",
      search:{
        title:"",
        fetch_code:"",
      },
      all: {
        page: 1,
        page_size: 20,
        tab: this.$route.query.id,
        on_sale: 0
      },
      kuaisulog:false,
      list2:[],

      keyi:true,
      hoveredIndex: -1,
      fenleilist:[],
      isshowchangeorder:false,
      nowchoose:{},
      noworder:''
    };
  },
  created() {
    this.getlist();

  },
  mounted() {},
  methods: {
    changefenlei:function(e){
      console.log(e)
      axios
        .post(`${this.apis}/api/set/page/class`, { id:e.id,cat_id:e.cat_id })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    getfenleilist:function(list){
      this.fenleilist = list
    },
    xuanzhong:function(item){
      if(!this.keyi){
        return
      }
      this.keyi = false
      var that = this
      axios
        .post(`${this.apis}/api/page/quick/make`, { tab:this.$route.query.id,id:item.id })
        .then(response3 => {
          if (response3.data.msg.code == 0) {


              let wenjianjia = 'web-page-yinyong'
              let wenjianjia2 = 'web-page'
              if(process.env.NODE_ENV === 'development'){
                // wenjianjia = 'test-web-page'
              }

              if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
              	wenjianjia = 'web-page-yinyong'
                wenjianjia2 = 'web-page'
              }
              if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
              	wenjianjia = 'test-web-page-yinyong'
                wenjianjia2 = 'test-web-page'
              }
              if(window.location.href.includes('localhost')){
                wenjianjia = 'test-web-page-yinyong'
                wenjianjia2 = 'test-web-page'
              }

              axios.get(`https://file.storep.91haoka.cn/${wenjianjia}/${item.id}.json?v=${Math.random()}`)
                .then(response2 => {


                    axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia2}/${response3.data.data.id}.json`})
                      .then(response => {

                        if(response.data.msg.code == 0){
                          const observer = {
                            next(res){

                            },
                            error(err){

                            },
                            complete(res){
                              that.$message.success('操作成功');
                              that.getlist()
                              that.kuaisulog = false

                              that.keyi = true
                            }
                          }

                          let files = JSON.stringify(response2.data)

                          let file = new File([files], `${wenjianjia2}/${response3.data.data.id}.json`, {type: 'application/json'});
                          const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
                          const subscription = observable.subscribe(observer) // 上传开始
                        }else{
                          this.$message.error(response.data.msg.info);
                        }
                      });
                })


          } else {
            this.keyi = true

            this.$message.error(response3.data.msg.info);
          }
        });

      // this.bianji(item.id,'',true)
      // axios
      //   .get(`${this.apis}/api/page/model/info`, { params:{id:item.id,page_id:this.$route.query.id} })
      //   .then(response => {
      //     if (response.data.msg.code == 0) {

      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   });

      // axios
      //   .post(`${this.apis}//api/page/quick/make`, { tab:this.$route.query.id,page_id:item.id })
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.$message.success('操作成功');
      //       this.getlist()
      //       this.kuaisulog = false
      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   });
    },
    getlist3:function(){
      axios
        .get(`${this.apis}/api/page/model/all/list`, { params: this.search })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list2 = response.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    kuaisuguanliankai:function(){
      this.getlist3()
      this.kuaisulog = true
    },
    sousuo:function(){
      this.getlist3()
    },
    handleMouseEnter(row, column, cell, event) {
      this.hoveredIndex = this.list.indexOf(row);
    },
    handleMouseLeave(row, column, cell, event) {
      this.hoveredIndex = -1;
    },
    moveUp(id, index){
     axios.post(`${this.apis}/api/page/sort`, {
        id:id,
        type: 1,
      })
      .then(response => {
        this.$message.success("操作上移成功");
        this.getlist();
        this.updateListAfterMove(index, -1);
      })
      .catch(error => {
        this.$message.error(response.data.msg.info);
      });

    },
    moveDown(id, index) {
      axios.post(`${this.apis}/api/page/sort`, {
        id: id,
        type: 2
      })
      .then(response => {
        this.getlist();
        this.$message.success("操作下移成功");
        this.updateListAfterMove(index, 1);
      })
      .catch(error => {
        this.$message.error(response.data.msg.info);
      });
    },
    updateListAfterMove(index, offset) {
      // 这边是交换元素位置
      const temp = this.list[index];
      this.list[index] = this.list[index + offset];
      this.list[index + offset] = temp;
    },

   switchTab(tabName) {
      this.activeName = tabName;
    },
    shangxiajia: function(item, val) {
      axios
        .post(`${this.apis}/api/page/sale/set`, { id: item.id, on_sale: val })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            this.$message.success("操作上下架成功");
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    shanchu: function(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios
          .post(`${this.apis}/api/page/delete`, { id: id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("已删除");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      });
    },
    fanye: function(page) {
      console.log(page);
      this.all.page = page;
      this.getlist();
    },
    getlist2: function(val) {
      this.all.on_sale = val
      this.all.page = 1;
      this.getlist();
    },
    getlist: function() {
      axios
        .get(`${this.apis}/api/page/list`, { params: this.all })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            if (this.list != "") {
              this.list.forEach(item => {
                if (item.cat_names != "") {
                  item.cat_names = item.cat_names.toString();
                }
              });
            }
            this.total = response.data.data.total;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    tianjia2: function() {
      this.$router.push({
        path: "/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduoxin",
        query: {
          tab: this.$route.query.id
        }
      });
    },
    tianjia: function() {
      let wenjianjia2 = "web-store";
      if (process.env.NODE_ENV === "development") {
        // wenjianjia = 'test-web-store'
      }
      if (
        window.location.href.includes("storep.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia2 = "web-store";
      }
      if (
        window.location.href.includes("store.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia2 = "test-web-store";
      }
      if (window.location.href.includes("localhost")) {
        wenjianjia2 = "test-web-store";
      }

      axios
        .get(
          `https://file.storep.91haoka.cn/${wenjianjia2}/${
            this.all.tab
          }.json?v=${Math.random()}`
        )
        .then(response => {
          if (response.data) {
            let list2 = JSON.parse(response.data);
            let moban = 1;
            list2.forEach(item => {
              if (item.type == 7) {
                moban = item.moban;
              }
            });
            if (moban == 1) {
              this.$router.push({
                path: "/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpinfabuxin",
                query: {
                  tab: this.$route.query.id
                }
              });
            } else {
              this.$router.push({
                path:
                  "/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpinfabuxin",
                query: {
                  tab: this.$route.query.id
                }
              });
            }
          } else {
          }
        })
        .catch(() => {
          this.$message.error(
            "当前商品页未配置完成，无法添加商品，请先编辑商品页完成配置后保存在添加。"
          );
        });
    },
    bianji: function(item) {

      if(item.is_model == 1){
        this.$router.push('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpinfabuxin?yinyong=true&id='+item.id+'&page_id='+item.page_id+'&yinyongshangpin=true')
        return
      }

      let wenjianjia2 = "web-store";
      if (process.env.NODE_ENV === "development") {
        // wenjianjia = 'test-web-store'
      }
      if (
        window.location.href.includes("storep.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia2 = "web-store";
      }
      if (
        window.location.href.includes("store.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia2 = "test-web-store";
      }
      if (window.location.href.includes("localhost")) {
        wenjianjia2 = "test-web-store";
      }

      axios
        .get(
          `https://file.storep.91haoka.cn/${wenjianjia2}/${
            this.all.tab
          }.json?v=${Math.random()}`
        )
        .then(response => {
          if (response.data) {
            let list2 = JSON.parse(response.data);
            let moban = 1;
            list2.forEach(item => {
              if (item.type == 7) {
                moban = item.moban;
              }
            });
            // if (moban == 1) {
            //   if (val == "duo") {
            //     var url =
            //       "/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduoxin";
            //   } else {
            //     var url =
            //       "/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpinfabu";
            //   }
            //   this.$router.push({
            //     path: url,
            //     query: {
            //       tab: this.$route.query.id,
            //       id: id
            //     }
            //   });
            // } else {
              // if (val == "duo") {
              //   var url =
              //     "/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduoxin";
              // } else {
                var url =
                  "/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpinfabuxin";
              // }
              this.$router.push({
                path: url,
                query: {
                  tab: this.$route.query.id,
                  id: item.id,
                }
              });
          }
        });
    },
    changeorder(row){
      this.nowchoose = row
      this.noworder = row.order
      this.isshowchangeorder = true
    },
    surechange(){
      if(this.noworder == ''){
        this.$message.error('请输入排序');
        return
      }
      axios
        .post(`${this.apis}/api/page/order/update`, { id:this.nowchoose.id,order:this.noworder })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            this.isshowchangeorder = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      
    }
  }
};
</script>

<style scoped lang="less">
/deep/ .el-input {
  border: none;
  background: #F3F5F8;
}
      /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
.up_and_down{
  cursor: pointer;
  width: 240px;
  justify-content: space-between;
  display: flex;
}
/deep/ .el-table__body tr:hover > td {
  background-color: white !important;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  }

// 去掉表格单元格边框
.customer-table th{
    border:none;

  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;

}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #EBEEF5;
    border-left: none;

}
// 去除边框线
/deep/ .el-table::before {
    height: 0;

}
// /deep/ .el-tabs__header {
//   display: none;
// }
.zhiboxiaoshou_shangpin {
  // background: #f2f2f2;
  min-height: 100vh;
  /deep/ .el-breadcrumb {
    font-size: 16px;
  }
  * {
    box-sizing: border-box;
  }
  .zhiboxitong_content {
    height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #3a3e4b;
      height: 100%;

    }
    .right {
      width: calc(100vw - 220px);
      height: 100vh;
      overflow: auto;
      .zhiboxitong_right {
        // height: calc(100vh - 90px);
        // overflow: auto;
        background: #fff;
        border-radius: 5px;
        padding: 15px 0 0 20px;
      }
      .zhiboxitong_table {
        margin-top: 20px;
        padding: 30px;
      }
    }
  }
  /deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
  padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
/deep/ .el-table__body td{
 height: 72px;
}
/deep/ .el-table{
  background-color: #F8F9FD;
}
  .add_ware{
    display: flex;
    justify-content: space-between;
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  .flexb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flexc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flexbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .flexcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}
 .t_tab_title_lei {
  color: #005aff;
}
.tabs_line_son{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
// .t_tab_title_lei_no {
//   color: #999;
// }
.t_under_line_lei {
  width: 30px;
  height: 5px;
  background-color: #005aff;
  margin-top: 6px;
  border-radius: 10px;
}
/deep/ .el-pagination .el-pager li {
  border-radius: 12px; /* 设置圆角大小 */
}
.handle_btn {
  display: flex;
  align-items: center;
}
.img_up {
  cursor: pointer;
  margin-left: 20px;
  width: 17px;
  height: 17px;
}
.img_down{
  cursor: pointer;
  margin-left: 15px;
  width: 17px;
  height: 17px;
}
.tabs_container{
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  cursor: pointer;
  margin-left: 20px;
  width: 240px;
  justify-content: space-between;
}
/deep/ .el-button--default{
  border-radius:12px;
  background: #F72C50;
  border: 0;
  color: white;
} .tabsClick{
  // box-shadow: 5px 5px 10px 0 #335DFF;
  background: rgb(0, 90, 255); border-radius:10px; font-size: 16px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 250px; height: 50px; margin-right: 30px; line-height: 50px;}
 .tabsNoClick{font-size: 16px; text-align: center; font-weight: 500;height: 50px; margin-right: 30px; width: 200px; line-height: 50px;cursor: pointer;color:#335DFF}
</style>
